require(['./config'], () => {
    require(['template', 'url', 'header', 'footer', 'jqueryShuffling', 'zoom'], (template, url, head) => {

        //最下面 相关商品 滑动效果
        $(".picScroll-left").slide({ titCell: ".hhd ul", mainCell: ".bd ul", autoPage: true, effect: "left", vis: 3 })

        //渲染页面
        class Detail {
            constructor() {
                this.gatData()
            }
            gatData() {
                const id = window.location.search.slice(4)
                $.get(`${url.xmyx}/detail?id=${id}&normal=1&sa=`, res => {
                    // console.log(res)
                    this.renderDetail(res)
                    this.renderImg(res)
                    this.countChange()
                })
            }
            // 渲染放大镜部分
            renderDetail(res) {
                if (res.code === 200) {
                    console.log(res.data)
                    const {
                        id,
                        title,
                        itemId,
                        price,
                        originPrice,
                        favoritedCount,
                        photo
                    } = res.data.detail
                    $("#box").html(template('detailData', {
                        id,
                        title,
                        itemId,
                        price,
                        originPrice,
                        favoritedCount,
                        photo
                    }))

                    // $("#smImage").on('click','li',(e) => {
                    //     console.log(123)

                    //     // $(this).css('border-color','red')
                    // })

                    // 放大镜-插件-效果
                    $(".zoom-image").elevateZoom({
                        gallery: 'smImage'
                    })
                    this.addToCart(id, photo[0].url, title, originPrice, price)

                }
            }
            //渲染商品详情那几张图片
            renderImg(res) {
                if (res.code === 200) {
                    const {
                        descContentList
                    } = res.data.detail

                    $("#detailImg").html(template('detailImgXR', {
                        descContentList
                    }))
                }
            }

            //数量加减
            countChange(){
                $(".reduce").on('click',function(){
                    let num = $('#num_').val() - 0
                    num--
                    if(num <= 1){
                        num = 1
                    }
                    $('#num_').val(num)
                })
                $(".add").on('click',function(){
                    let num = $('#num_').val() - 0
                    num++
                    $('#num_').val(num)
                })
            }

            //加入购物车
            addToCart(id, imgUrl, title, originPrice, price) {
                $("#box").on('click', '.addToCar', () => {
                    // 1.获取商品信息，并且与localstorge里面的信息进行对比
                    // const info = [
                    //     {id,imgUrl,title,originPrice,price} 
                    // ]
                    //2.更新购物车里的数据
                    let info = null
                    let num = $('#num_').val() - 0
                    if (localStorage.getItem("info")) {
                        info = JSON.parse(localStorage.getItem("info"))
                        let flag = false
                        info.forEach(function (item) {
                            if (id == item.id) {
                                item.count = Number(item.count) + num
                                flag = true
                            }   
                        })

                        if (flag) {

                        } else {
                            const obj = { id, imgUrl, title, originPrice, price, count: num }
                            info.push(obj)
                        }
                    }
                    else {
                        info = [{ id, imgUrl, title, originPrice, price, count: num }]
                    }

                    localStorage.setItem('info', JSON.stringify(info))

                    //在头部显示商品数量（调用，实例化对象）
                    head.shopNum()


                    //3.显示加入购物车成功
                    $(".warning").animate({ opacity: 1 }, 500, 'linear', () => {
                        setTimeout(() => {
                            $(".warning").animate({ opacity: 0 }, 500, 'linear')
                        }, 500)
                    })
                })
            }
        }
        return new Detail()





    })
})